<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>

p { background:yellow; margin:6px 0; } 

p.off { background: black; }

</style>
<script type="text/javascript" src="static/js/jquery/jquery-2.2.4.min.js"></script>
</head>
<body>
	<!-- <h2>Greetings</h2>
	<div class="container">
		<div class="inner">Hello</div>
		<div class="inner">Goodbye</div>
	</div>
	
	<script type="text/javascript">
		//把菜加给我
		$('<p>Test</p>').appendTo('.inner');

		//我要加菜
		$('.inner').append('<p>yyy</p>');
	</script>
	
		empty()这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。
		因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点
	
	<input type="button" value="清空" onclick="var l=$('.container').empty();alert(l); l.appendTo('body');">
	
	<p>Hello</p>
  		how are
  	<p>you?</p>
  	
	<button>Attach/detach paragraphs</button>
	<script>
	    $("p").click(function(){
	      	$(this).toggleClass("off");
	    });
	    
	    var p;
	    $("button").click(function(){
	      if (p) {
	        p.appendTo("body");
	        p = null;
	      } else {
	        p = $("p").detach();//清除元素的同时，返回他们
	      }
	    });

	</script>
	
	<ul class="level-1">
	  <li class="item-i">I</li>
	  <li class="item-ii">II
	    <ul class="level-2">
	      <li class="item-a">A</li>
	      <li class="item-b">B
	        <ul class="level-3">
	          <li class="item-1">1</li>
	          <li class="item-2">2</li>
	          <li class="item-3">3</li>
	        </ul>
	      </li>
	      <li class="item-c">C</li>
	    </ul>
	  </li>
	  <li class="item-iii">III</li>
	</ul>
	
	<script type="text/javascript">
		//$('li.item-ii').find('li').css('background-color', 'red');
		//$('li.item-a').parent().css('background-color', 'red');
		//$('li.item-a').parents().css('background-color', 'red');
		
	</script> -->
	
	<table id="dataTable"  border="1">
		<tr id="u"><td>1</td><td>2</td><td><a href="javascript:void(0);" onclick="$(this).parent().parent().remove();">删除</a></td></tr>
	</table>
	
	
	
	<button id="theone">Does nothing...</button>
	<button id="bind">Add Click</button>
	<button id="unbind">Remove Click</button>
	<div style="display: none;">Click!</div>
	
	
	<script type="text/javascript">
	/*function abc() {
		  $("div").show().fadeOut("slow");
		}
		
		$("#bind").click(function () {
		  //$("body").on("click", "#dataTable", abc).find("#theone").text("Can Click!");
		    
			$("#dataTable").click(function() {
				  $("div").show().fadeOut("slow");
			});
		});
		
		$("#unbind").click(function () {
		  //$("body").off("click", "#dataTable").find("#theone").text("Does nothing...");

		  $("#dataTable").off("click");
		});*/

		$("#dataTable").click(function() {
			  $("div").show().fadeOut("slow");
			  $("#dataTable").off("click");
		});
		
	</script>
	
</body>
</html>